<!--
 * 登录页面组件
 * 
 * 功能说明：
 * 1. 提供用户登录界面（用户名、密码输入）
 * 2. 验证用户输入的有效性
 * 3. 发送登录请求到后端API
 * 4. 根据用户角色跳转到对应页面
 * 5. 将用户信息存储到cookie中
 * 
 * 后端交互：
 * - POST /api/login：发送登录请求
 * - 请求参数：{username, password}
 * - 响应数据：{role, adminName/teacherName/studentName, adminId/teacherId/studentId}
 * 

-->
<template>
  <div id="login">
    <!-- 背景图片层 -->
    <div class="bg"></div>
    
    <!-- 主要内容区域 -->
    <el-row class="main-container" >
      <el-col :lg="20" :xs="16" :md="10" :span="10">
        <!-- 登录表单容器 -->
        <div class="bottom" style="margin-top:220px;margin-left: 65%">
          <div class="container" >
            <!-- 登录标题 -->
            <p class="title" style="color: #e75c09">
              <img src="../../assets/img/loginicon.png" style="width: 40px;position: relative; top: 13px;right: 6px">登录在线考试系统
            </p>
            
            <!-- 登录表单 -->
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
              <!-- 用户名输入框 -->
              <el-form-item label="用户名" >
                <el-input style="width: 240px" v-model.number="formLabelAlign.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              
              <!-- 密码输入框 -->
              <el-form-item label="密码" >
                <el-input style="width: 240px" v-model="formLabelAlign.password" placeholder="请输入密码" type='password'></el-input>
              </el-form-item>
              
              <!-- 登录按钮 -->
              <div class="submit">
                <el-button style="width: 200px" type="primary" class="row-login" @click="login()">登录</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <!-- 页脚区域 -->
    <el-row class="footer">
      <el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导入Vuex的mapState辅助函数，用于获取状态
import {mapState} from 'vuex'

export default {
  name: "login", // 组件名称
  data() {
    return {
      role: 2, // 默认角色（2表示学生）
      labelPosition: 'left', // 表单标签位置
      formLabelAlign: {
        username: '', // 用户名
        password: ''  // 密码
      }
    }
  },
  methods: {
    // 用户登录方法 - 请求后台处理
    login() {
      // 验证用户名是否为空
      if(this.formLabelAlign.username == undefined || this.formLabelAlign.username == '') {
         this.$message('请输入用户名');
        return;
      }
      
      // 验证用户名格式：必须是数字且长度不超过10位
      if(!(/^\d+$/.test(this.formLabelAlign.username)) || this.formLabelAlign.username.toString().length > 10) {
        this.$message('用户名有误');
        return;
      }
      
      // 验证密码是否为空
      if(this.formLabelAlign.password == "") {
        this.$message('请输入密码');
        return;
      }
      
      // 发送登录请求到后端API
      this.$axios({
        url: `/api/login`, // 登录接口地址
        method: 'post', // 请求方法
        data: {
          ...this.formLabelAlign // 发送用户名和密码
        }
      }).then(res=>{
        let resData = res.data.data // 获取响应数据
        
        if(resData != null) {
          // 根据用户角色进行不同处理
          switch(resData.role) {
            case "0":  // 管理员
              // 将管理员信息存储到cookie
              this.$cookies.set("cname", resData.adminName) // 管理员姓名
              this.$cookies.set("cid", resData.adminId)     // 管理员ID
              this.$cookies.set("role", 0)                  // 角色标识
              this.$router.push({path: '/index' })          // 跳转到管理员首页
              break
            case "1": // 教师
              // 将教师信息存储到cookie
              this.$cookies.set("cname", resData.teacherName) // 教师姓名
              this.$cookies.set("cid", resData.teacherId)     // 教师ID
              this.$cookies.set("role", 1)                    // 角色标识
              this.$router.push({path: '/index' })            // 跳转到教师首页
              break
            case "2": // 学生
              // 将学生信息存储到cookie
              this.$cookies.set("cname", resData.studentName) // 学生姓名
              this.$cookies.set("cid", resData.studentId)     // 学生ID
              this.$router.push({path: '/student'})           // 跳转到学生首页
              break
          }
        }
        
        // 登录失败的错误提示
        if(resData == null) {
          this.$message({
            showClose: true,
            type: 'error',
            message: '用户名或者密码错误'
          })
        }
      })
    },
    
    // 点击标签切换角色（当前未使用）
    clickTag(key) {
      this.role = key
    }
  },
  
  // 计算属性：从Vuex获取用户信息
  computed: mapState(["userInfo"]),
  
  // 组件挂载后的生命周期钩子
  mounted() {
    // 当前为空，可以在这里添加初始化逻辑
  }
}
</script>

<style lang="less" scoped>
/* 提醒框样式 */
.remind {
  border-radius: 4px;
  padding: 10px 20px;
  display: flex;
  position: fixed;
  right: 20px;
  bottom: 50%;
  flex-direction: column;
  color: #606266;
  background-color: #fff;
  border-left: 4px solid #409eff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

/* 容器样式 */
.container {
  margin-bottom: 32px;
}

/* 单选按钮组样式 */
.container .el-radio-group {
  margin: 30px 0px;
}

/* 链接样式 */
a:link {
  color:#ff962a;
  text-decoration:none;
}

/* 登录页面整体样式 */
#login {
  font-size: 14px;
  color: #000;
  background-color: #fff;
}

/* 背景图片样式 */
#login .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: url('../../assets/img/loginbg.png')center top / cover no-repeat;
  background-color: #b6bccdd1 !important;
}

/* 主容器样式 */
#login .main-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 顶部区域样式 */
#login .main-container .top {
  margin-top: 150px;
  font-size: 30px;
  color: #ff962a;
  display: flex;
  justify-content: center;
}

/* 考试图标样式 */
#login .top .icon-kaoshi {
  font-size: 80px;
}

/* 标题样式 */
#login .top .title {
  margin-top: 20px;
}

/* 底部登录框样式 */
#login .bottom {
  display:flex;
  justify-content: center;
  background-color:#fff;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* 底部标题样式 */
#login .bottom .title {
  text-align: center;
  font-size: 30px;
}

/* 容器标题样式 */
.bottom .container .title {
  margin: 30px 0px;;
}

/* 登录按钮样式 */
.bottom .submit .row-login {
  width: 100%;
  background-color: #3186cb;
  border-color: #ffffff;
  margin: 20px 0px 10px 0px;
  padding: 15px 20px;
}

/* 提交区域样式 */
.bottom .submit {
  display: flex;
  justify-content: center;
}

/* 页脚样式 */
.footer {
  margin-top: 50px;
  text-align: center;
}

/* 页脚消息1样式 */
.footer .msg1 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 15px;
}

/* 页脚消息2样式 */
.footer .msg2 {
  font-size: 14px;
  color: #e3e3e3;
  margin-top: 70px;
}

/* 选项区域样式 */
.bottom .options {
  margin-bottom: 40px;
  color: #ff962a;
  display: flex;
  justify-content: space-between;
}

/* 选项链接样式 */
.bottom .options > a {
  color: #ff962a;
}

/* 注册选项样式 */
.bottom .options .register span:nth-child(1) {
  color: #8C8C8C;
}
</style>
